<template>
	<view class="content ">
		<view class="head padding-top-xl padding-lr-sm">
			<view class="left ">
				<text>平台商家入驻</text>
				<text>独立商铺后台管理系统</text>
			</view>
			<view class="right"><image src="../../static/hahah.png" mode="" class="r"></image></view>
		</view>
		<view class="form padding shadow">
			<view class="fillIn padding-bottom">资料填写</view>
			<block>
				<view class="shop padding-tb">
					<text class="margin-right">店铺</text>
					<input type="text" value="" placeholder="请填写您的店铺名" v-model="nickname" placeholder-class="inputC" />
				</view>
			</block>

			<block>
				<view class="shop padding-tb">
					<text class="margin-right">电话</text>
					<input type="text" value="" v-model="tel" placeholder="请填写您的联系方式" placeholder-class="inputC" />
				</view>
			</block>

			<block>
				<view class="shop padding-tb" @click="getAddr">
					<text class="margin-right">地址</text>
					<input type="text" value="" placeholder="请填写您的经营地址" disabled v-model="address_city" placeholder-class="inputC" />
				</view>
			</block>

			<block>
				<view class="shop padding-tb">
					<text class="margin-right">账号</text>
					<input type="text" value="" placeholder="请填写您的账号" v-model="username" placeholder-class="inputC" />
				</view>
			</block>

			<block>
				<view class="shop padding-tb">
					<text class="margin-right">密码</text>
					<input type="text" value="" placeholder="请填写后台密码" v-model="password" placeholder-class="inputC" />
				</view>
			</block>

			<block>
				<view class="add margin-tb">
					<view class="upload bg-img" @click="onChooseImg(1)" :style="[{ backgroundImage: 'url(' + logo + ')' }]">{{ logo ? '' : '上传店铺logo' }}</view>
					<view class="upload bg-img" @click="onChooseImg(2)" :style="[{ backgroundImage: 'url(' + image + ')' }]">{{ image ? '' : '上传头像' }}</view>
				</view>
			</block>

			<block>
				<view class="add margin-tb">
					<view class="upload bg-img" @click="onChooseImg(3)" :style="[{ backgroundImage: 'url(' + yyzz_images + ')' }]">
						{{ yyzz_images ? '' : '上传营业执照正本' }}
					</view>
					<!-- <view class="upload">上传营业执照正本</view> -->
				</view>
			</block>

			<view class="submit" @click="my_card">提交申请</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			nickname: '', // 店名
			password: '', // 密码
			username: '', // 账号
			address_city: '', // 位置
			longitude: '', //
			latitude: '',
			tel: '', // 电话
			logo: '',
			image: '',
			yyzz_images: '',
		};
	},
	onLoad(e) {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#EEC581',
			animation: {
				duration: 400,
				timingFunc: 'easeIn',
			},
		});
	},
	methods: {
		onChooseImg(i) {
			if (i == 1) {
				let that = this;
				that.$tools.chooseImage(1).then(res => {
					that.$tools.uploadImage('index/upload', res[0]).then(res => {
						console.log('res :>> ', res);
						that.logo = res.full_url;
					});
				});
			}
			if (i == 2) {
				let that = this;
				that.$tools.chooseImage(1).then(res => {
					that.$tools.uploadImage('index/upload', res[0]).then(res => {
						that.image = res.full_url;
					});
				});
			}
			if (i == 3) {
				let that = this;
				that.$tools.chooseImage(1).then(res => {
					that.$tools.uploadImage('index/upload', res[0]).then(res => {
						that.yyzz_images = res.full_url;
					});
				});
			}
		},
		async getAddr() {
			const [, { name, address, longitude, latitude }] = await uni.chooseLocation();
			this.address_city = address;
			this.longitude = longitude;
			this.latitude = latitude;
			console.log('位置名称：' + name);
			console.log('详细地址：' + address);
			console.log('经度：' + longitude);
			console.log('纬度：' + latitude);
		},
		async my_card() {
			if (!this.nickname) return uni.$showMsg('不能为空 ! ');
			if (!this.password) return uni.$showMsg('不能为空 ! ');
			if (!this.username) return uni.$showMsg('不能为空 ! ');
			if (!this.address_city) return uni.$showMsg('不能为空 ! ');
			if (!this.tel) return uni.$showMsg('不能为空 ! ');
			if (!this.logo) return uni.$showMsg('不能为空 ! ');
			if (!this.image) return uni.$showMsg('不能为空 ! ');
			if (!this.yyzz_images) return uni.$showMsg('不能为空 ! ');

			let obj = {
				nickname: this.nickname,
				password: this.password,
				username: this.username,
				address_city: this.address_city,

				longitude: this.longitude,
				latitude: this.latitude,
				tel: this.tel,
				logo: this.logo,
				image: this.image,
				yyzz_images: this.yyzz_images,
			};
			const res = await this.$api('shenqingwufushang', obj);
			
			console.log('res :>> ', res);
		},
	},
};
</script>

<style lang="scss">
.content {
	background-color: #f9f9f9;
	width: 100vw;

	.head {
		padding-bottom: 80rpx;
		display: flex;
		background-color: #eec581;
		justify-content: space-between;
		.left {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			text:nth-child(1) {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
			}
			text:nth-child(2) {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #fff0d7;
			}
		}
		.right {
			image {
				width: 122rpx;
				height: 122rpx;
			}
		}
	}
	.form {
		margin-top: -40rpx;
		width: 750rpx;
		background: #ffffff;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
		.fillIn {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.shop {
			display: flex;
			border-bottom: 2rpx solid #f5f5f5;

			input,
			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.inputC {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}
		.submit {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 50rpx auto;

			width: 300rpx;
			height: 80rpx;
			background: #eec581;
			border-radius: 40rpx;

			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
		.add {
			display: flex;
			justify-content: space-between;
			.upload {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 333rpx;
				height: 180rpx;
				background: #f5f5f5;
				border-radius: 20rpx;
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #cccccc;
			}
		}
	}
}
</style>
